<template>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
        <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="1"
    >
        <div class="tag">
            <ul v-for="(item,index) in tagList" :key="index">
                <li v-for="i in item" :key="i.id">#{{i.name}}</li>
            </ul>
        </div>
        <!--    瀑布流布局-->
        <div ref="falls" class="falls">
            <div ref="item" class="item" v-for="item in noteList" :key="item.note.id">
                <div class="showImg" @click="clickcl(item.note.id)" >
                    <img :src="item.note?.image_u">
                    <div class="tag">
                        <van-icon v-if="item.note?.video_url" name="play" />
                        <van-icon v-else name="column" />
                    </div>
                </div>
                <div v-if="item.note?.straight_text" class="sign">
                    <van-icon name="checked" color="#649798" size="16" />
                    <span>{{item.note?.straight_text}}</span>
                </div>
                <div class="title">{{item.note?.title}}</div>
                <div class="info">
                    <div class="left" @click="touserdetails(item.note?.author.id)">
                        <img :src="item.note?.author.p">
                        <span>{{item.note?.author.n}}</span>
                    </div>
                    <div class="right">
                        <van-icon v-if="store.like.indexOf(item.note.id)===-1" name="like-o" size="20px" color="#000" @click="addLikeList(item.note.id)"/>
                        <van-icon v-else name="like" size="20px" color="#e4393c" @click="store.removeLikeList(item.note.id)"/>
                        <span v-if="store.like.indexOf(item.note.id)===-1">{{item.note?.like_count}}</span>
                        <span v-else>{{item.note?.like_count+1}}</span>
                    </div>
                </div>
            </div>
        </div>
    </van-list>
    </van-pull-refresh>
</template>

<script lang="ts" setup>
import {useHomeStore} from '@/stores/home'
import {getNoteListAPI} from '@/api/api'
import {reactive,ref,nextTick,onMounted,onUnmounted} from "vue";
import router from '@/router';
import {  useRoute } from "vue-router";
import { useLogining, useLogin } from "../stores/index"
defineOptions({
        name: 'Note',
    })
let route: any = useRoute();
let uselogining: any = useLogining()
let uselogin: any = useLogin()
const store = useHomeStore()
const loading = ref(false);
const finished = ref(false);
const tagList:any=reactive([])
const noteList:any=reactive([])
const item:any=ref(null)
const falls:any=ref(null)
let columnHeight:any=[0,0]
let offset = 10
let limit = 10
let index= 0
const isLoading = ref(false);
//下拉刷新
const onRefresh = () => {
    //将数据清空
    noteList.splice(0,noteList.length)
    onLoad()
    isLoading.value = false;
};
//上拉加载更多
const onLoad = async () => {
    const {data:{result}} = await getNoteListAPI(offset*index,limit,index)
    if(index===0){
        tagList.push(...result.topics)
    }
    result.list.map((item:any)=>{
         if(item.note){
            noteList.push(item)
         }
    })
    //数据加载完成后，再计算瀑布流布局
    await layout()
    // 数据全部加载完成
    if (result.list.length === 0) {
        finished.value = true;
    }
    index++
};
const layout = ()=>{//瀑布流布局
    //需要等待dom更新后再执行,否则获取不到元素的高度
    nextTick(()=>{
        //每一次加载数据后，重新计算瀑布流布局
        columnHeight=[0,0]
        for(let i=0;i<item.value.length;i++){
            if(i<2){
                if(i%2){
                    item.value[i].style.top=columnHeight[0]+'px'
                    item.value[i].style.left=50.5+'%'
                    columnHeight[0]+=item.value[i].clientHeight+10
                }else{
                    item.value[i].style.top=columnHeight[1]+'px'
                    item.value[i].style.left=1+'%'
                    columnHeight[1]+=item.value[i].clientHeight+10
                }
            }
            //从第三个开始
            else{
                let minIndex=columnHeight.indexOf(Math.min(...columnHeight))
                item.value[i].style.top=columnHeight[minIndex]+'px'
                item.value[i].style.left=minIndex%2?1+'%':50.5+'%'
                columnHeight[minIndex]+=item.value[i].clientHeight+10
            }
        }
        //为falls设置高度
        falls.value.style.height=Math.max(...columnHeight)+'px'
        // 加载状态结束
        loading.value = false;
    })
}
//添加喜欢
let addLikeList:(id:number)=>void=(id:number):void=>{
    if (uselogining.isLogining == 1) {
        store.addLikeList(id)
    }else{
       // 跳转到登录界面
       uselogin.updateLogin(true)
    }
}
onMounted(()=>{
    //监听窗口大小变化,重新计算瀑布流布局
    window.addEventListener('resize',layout)
    let isLogin = localStorage.getItem("isLogin")
    if (isLogin) {
        uselogining.updateLogining(isLogin)
  ;}
})
//组件卸载时，移除监听
onUnmounted(()=>{
    window.removeEventListener('resize',layout)
})

// 跳转用户详情页面
let touserdetails: (id: number) => void = (id: number): void => {
    router.push({name: 'userdetails', params: {id: id,path:route.fullPath}})
}
// 跳转笔记详情页面
let clickcl = function (id: string) {
  router.push({ name: "Notebook2", params: { id: id,path:route.fullPath } });
};
</script>

<style scoped lang="scss">
      @keyframes move{
        0%{
            transform: translateX(-100%);
        }
        100%{
            transform: translateX(0);
        }
      }
    .tag{
        overflow: auto;
        //隐藏滚动条
        &::-webkit-scrollbar{
            display: none;
        }
        ul{
            animation: move 5s linear 0s infinite;
            display: flex;
            li{
                //文字一行显示
                white-space: nowrap;
                background-color: #d8f8fc;
                margin: 5px;
                padding:3px 10px;
                color: #649798;
                font-size: 14px;
                border-radius:12px;
            }
        }
    }
    .falls{
        position: relative;
        margin-top: 10px;
        .item{
            position: absolute;
            width: 48.5%;
            border-radius: 10px;
            overflow: hidden;
            padding-bottom: 10px;
            img{
                width:100%;
                margin-bottom: 10px;
            }
            .showImg{
                position: relative;
                .tag{
                    position: absolute;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    top: 10px;
                    right: 10px;
                    width:25px;
                    height: 25px;
                    background-color: rgba(0,0,0,0.3);
                    border-radius: 50%;
                    color: #fff;
                    font-size: 14px;
                }
            }
            .sign{
                padding:0 5px 10px;
                font-size: 13px;
                color: #666;
                span{
                    margin-left: 5px;
                }
            }
            .title{
                padding-left: 5px;
                font-size: 16px;
                //文字最多显示两行，超出部分显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .info{
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                color: #666;
                .left{
                    display: flex;
                    align-items: center;
                    img{
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        transform: translateY(5px);
                    }
                    span{
                        //max-width: 100%;
                        padding-left: 5px;
                    }
                }
                .right{
                    span{
                        padding-left: 5px;
                    }
                }
            }
        }
    }
</style>